<template>
  <div>
    <div>{{ state.name }}</div>
  </div>
</template>
<script setup lang='ts'>
// toRef 是一个非常实用的小工具，它允许你在处理复杂的响应式数据结构时更加灵活
import { reactive, toRef } from 'vue';

const state = reactive({
  name: 'Alice',
  age: 28,
});

// 使用 toRef 把 name 属性转换成 ref
const userName = toRef(state, 'name');

// 现在 userName 就是一个 ref，当 state.name 发生改变时，userName 也会相应地更新
state.name = 'Bob';
console.log(userName.value); // 输出 "Bob"

// 如果直接修改了 userName.value，state.name 不会更新。这是因为 toRef 创建的是一个指向原始属性的引用，而不是一个双向绑定。
userName.name = 'jack'
console.log(state.name); // 输出还是 "Bob"

// toRef  也可以提供一个默认值(重点)
// const userName = toRef(state, 'name', 'Tom');
// console.log(userName.value) // Tom

// 注意事项
// toRef 不会追踪它所创建的 ref 的变化
// 如果你想要追踪一个 ref 的变化并同时更新原始对象，你应该考虑使用 computed 函数或者直接操作原始对象。

                        
</script>
<style scoped lang='scss'>
</style>